<template>
    <div class="app-container">
        <div class="custProfile">
            <div class="cust-info">
                <div class="cust-name">
                    {{customer.C_NAME}}
                    <div class="cust-phone">{{customer.C_PHONE.slice(0,3)+'****'+customer.C_PHONE.slice(-4)}}</div>
                    <div class="tag-list">
                        <div class="tag-item">{{customer.CURR_STATUS}}</div>
                        <div class="tag-item">{{getLookUpName(customer.C_CHANNEL, custChannelOptions)}}</div>
                    </div>
                </div>
                <div class="cust-address">{{customer.FULL_ADDRESS}}</div>
                
                <div class="cust-creator">
                    创建人：{{customer.CREATE_NAME}}
                    <div class="cust-date">{{ parseTime(customer.CREATE_TIME.time, '{y}-{m}-{d}') }}</div>
                </div>
            </div>
        </div>
        
        <el-tabs v-model="curTab">
            <el-tab-pane label="客户标签" name="khbq">
                <el-table :data="khbq">
                    <el-table-column label="用户类型" align="center" prop="yhlx"/>
                    <el-table-column label="客户等级" align="center" prop="khdj"/>
                    <el-table-column label="创建方式" align="center" prop="cjfs" >
                        <template slot-scope="scope">
                            <span>{{ getLookUpName(scope.row.cjfs, createTypeOptions) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="电话类型" align="center" prop="dhlx">
                        <template slot-scope="scope">
                            <span>{{ getLookUpName(scope.row.dhlx, phoneTypeOptions) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="量尺设计" align="center" prop="lcsj">
                        <template slot-scope="scope">
                            <span>{{ getLookUpName(scope.row.lcsj, roomDesignStatusOptions) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="来源" align="center" prop="ly">
                        <template slot-scope="scope">
                            <span>{{ getLookUpName(scope.row.ly, custSourceOptions) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="内部设计师" align="center" prop="nbsjs"/>
                    <el-table-column label="中间人姓名" align="center" prop="zjrxm"/>
                    <el-table-column label="施工工长" align="center" prop="sggz"/>
                    <el-table-column label="导购" align="center" prop="shoppingguide"/>
                    <el-table-column label="业务员" align="center" prop="salesman"/>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="联单" name="ld">
                <el-table :data="ld">
                    <el-table-column label="类型" align="center" prop="srctype"/>
                    <el-table-column label="客户姓名" align="center" prop="cname"/>
                    <el-table-column label="客户状态" align="center" prop="status"/>
                    <!-- <el-table-column label="微信编号" align="center" prop="sysType"/> -->
                    <el-table-column label="一级销区" align="center" prop="rp02name"/>
                    <el-table-column label="二级销区" align="center" prop="rp03name"/>
                    <el-table-column label="品牌" align="center" prop="rp05name"/>
                    <el-table-column label="门店" align="center" prop="dept_name"/>
                    <el-table-column label="员工工号" align="center" prop="mem_code"/>
                    <el-table-column label="员工姓名" align="center" prop="mem_name"/>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="微信" name="wx">
                <el-table :data="wx">
                    <el-table-column label="UNIID" align="center" prop="unionid"/>
                    <el-table-column label="昵称" align="center" prop="nickname"/>
                    <el-table-column label="是否关注过" align="center" prop="mp_forcus_yn"/>
                    <el-table-column label="当前关注" align="center" prop="mp_forcus_now_yn"/>
                    <el-table-column label="是否加好友" align="center" prop="friend_add_yn"/>
                    <el-table-column label="当前好友" align="center" prop="friend_now_yn"/>
                    <el-table-column label="是否注册小程序" align="center" prop="app_regist_act_yn"/>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="收退款" name="stk">
                <el-table :data="stk">
                    <el-table-column label="时间" align="center" prop="gldate"/>
                    <el-table-column label="类型" align="center" prop="rcdct"/>
                    <el-table-column label="金额" align="center" prop="d_cash_amt"/>
                    <!-- <el-table-column label="方式" align="center" prop="sysType"/> -->
                    <el-table-column label="备注" align="center" prop="rc_rmk01"/>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="订单" name="dd">
                <el-table :data="dd">
                    <el-table-column label="订单编号" align="center" prop="order_no"/>
                    <!-- <el-table-column label="订单类型" align="center" prop="sysType"/> -->
                    <el-table-column label="订单金额" align="center" prop="order_amt"/>
                    <el-table-column label="订单状态" align="center" prop="sdlttr"/>
                    <!-- <el-table-column label="订单备注" align="center" prop="sysType"/> -->
                    <!-- <el-table-column label="预计发货日期" align="center" prop="req_date_f"/> -->
                    <el-table-column label="商品名称" align="center" prop="product_name"/>
                    <el-table-column label="商品编号" align="center" prop="product_litm"/>
                    <!-- <el-table-column label="单价" align="center" prop="sysType"/> -->
                    <el-table-column label="数量" align="center" prop="order_qty"/>
                    <el-table-column label="已发货" align="center" prop="sendqty"/>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="发货" name="fh">
                <el-table :data="fh">
                    <el-table-column label="发货单号" align="center" prop="order_no"/>
                    <!-- <el-table-column label="订单类型" align="center" prop="sysType"/> -->
                    <!-- <el-table-column label="费用" align="center" prop="sysType"/> -->
                    <el-table-column label="发货单状态" align="center" prop="status"/>
                    <!-- <el-table-column label="审核状态" align="center" prop="sysType"/> -->
                    <!-- <el-table-column label="配送进度" align="center" prop="sysType"/>
                    <el-table-column label="司机姓名" align="center" prop="sysType"/>
                    <el-table-column label="司机电话" align="center" prop="sysType"/> -->
                    <!-- <el-table-column label="发货日期" align="center" prop="sysType"/> -->
                    <el-table-column label="创建日期" align="center" prop="order_date"/>
                    <el-table-column label="商品名称" align="center" prop="product_name"/>
                    <el-table-column label="商品编号" align="center" prop="product_litm"/>
                    <el-table-column label="发货数量" align="center" prop="sales_qty"/>
                    <el-table-column label="发货日期" align="center" prop="sales_date"/>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="投诉单" name="tsd">
                <el-table :data="tsd">
                    <el-table-column label="创建时间" align="center" prop="ts_createdate"/>
                    <!-- <el-table-column label="类型" align="center" prop="list_name"/> -->
                    <el-table-column label="状态" align="center" prop="status"/>
                    <!-- <el-table-column label="等级" align="center" prop="sysType"/> -->
                    <el-table-column label="反馈类型" align="center" prop="list_name"/>
                    <el-table-column label="反馈渠道" align="center" prop="source_desc"/>
                    <el-table-column label="创建人" align="center" prop="createusername"/>
                    <el-table-column label="受理人" align="center" prop="closerusername"/>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="维修单" name="wxd">
                <el-table :data="wxd">
                    <el-table-column label="维修单号" align="center" prop="sysType"/>
                    <el-table-column label="费用" align="center" prop="sysType"/>
                    <el-table-column label="状态进度" align="center" prop="sysType"/>
                    <el-table-column label="维修进度" align="center" prop="sysType"/>
                    <el-table-column label="师傅姓名" align="center" prop="sysType"/>
                    <el-table-column label="师傅电话" align="center" prop="sysType"/>
                    <el-table-column label="上门日期" align="center" prop="sysType"/>
                    <el-table-column label="创建日期" align="center" prop="sysType"/>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="异常单" name="ycd">
                <el-table :data="ycd">
                    <el-table-column label="单号" align="center" prop="p_code"/>
                    <el-table-column label="操作人" align="center" prop="p_operator"/>
                    <el-table-column label="操作人岗位" align="center" prop="p_position"/>
                    <el-table-column label="操作时间" align="center" prop="p_operatortime"/>
                    <el-table-column label="一级原因" align="center" prop="p_firstreasontype"/>
                    <el-table-column label="二级原因" align="center" prop="p_secondreasontype"/>
                    <!-- <el-table-column label="三级原因" align="center" prop="sysType"/>
                    <el-table-column label="处理状态" align="center" prop="sysType"/> -->
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
  </template>
  
  <script>
  import { setToken, getToken, setLesseeId } from '@/utils/auth'
  import requestCrm from '@/utils/requestCrm'
  import requestCommon from '@/utils/requestCommon'
  
  export default {
    name: "crmCustDetail",
    data() {
      return {
        custId:'',
        curTab:'khbq',
        customer:{},
        khbq:[],
        ld:[],
        wx:[],
        stk:[],
        dd:[],
        dd1:[],
        fh:[],
        fh1:[],
        tsd:[],
        wxd:[],
        ycd:[],

        custChannelOptions:[],
        createTypeOptions:[],
        phoneTypeOptions:[],
        custSourceOptions:[],
        roomDesignStatusOptions:[]
      };
    },
    created() {
        let token = this.$route.query.token
        if(token){
        setToken(token)
        this.$store.commit('SET_TOKEN', token)
        setLesseeId('13')
            this.$store.commit('SET_LESSEEID', '13')
        }
        this.custId = this.$route.query.custId
        this.getLookUpInfo('CUST_CREATE_TYPE', (res)=>{
            this.createTypeOptions = res
        })
        this.getLookUpInfo('HN_CUST_PHONE_TYPE', (res)=>{
            this.phoneTypeOptions = res
        })
        this.getLookUpInfo('HN_CUST_SOURCE', (res)=>{
            this.custSourceOptions = res
        })
        this.getLookUpInfo('ROOM_DESIGN_STATUS', (res)=>{
            this.roomDesignStatusOptions = res
        })
        this.getLookUpInfo('HN_CUST_CHANNEL', (res)=>{
            this.custChannelOptions = res
        })
        
        this.getKhbq()
        this.getOther()
    },
    methods: {
        getLookUpInfo(lookupcode, call){
            requestCrm({
                url:'WxService?method=LookupInfoByLookupCode',
                method: 'post',
                data: {
                    lookupcode
                }
            }).then(res=>{
                if(call){
                    call(res.data)
                }
            })
        },
        getLookUpName(code, options){
            if(options){
                let res = options.filter(obj=>{
                    return obj.LOOKUP_CODE==code
                })
                if(res&&res.length){  
                    return res[0].LOOKUP_NAME
                }else{
                    return code
                }
            }else{
                return code
            }
        },
        getKhbq(){
            this.khbq = [
                {
                    yhlx:"",
                    khdj:"",
                    cjfs:"",
                    dhlx:"",
                    lcsj:"",
                    ly:"",
                    nbsjs:"",
                    nbzjr:"",
                    sggz:"",
                    dg:"",
                    ywy:"",
                    salesman:"",
                    shoppingguide:""
                }
            ]
            requestCommon({
                url:'https://wx.4006002222.com/biapex/bidwdb/dcp/cst_custbaseinfo?crm_id='+this.custId,
                method: 'get',
                data: {
                    
                }
            }).then(res=>{
                if(res.status==200){
                    if(res.data&&res.data.items&&res.data.items.length){
                        this.khbq[0].salesman = res.data.items[0].salesman
                        this.khbq[0].shoppingguide = res.data.items[0].shoppingguide
                    }
                }
            })
            requestCrm({
                url:'WxService?method=getRoomDesignByCrmid',
                method: 'post',
                data: {
                    CRM_ID: this.custId
                }
            }).then(res=>{
                let ID = res.data.ID
                if(ID){
                    requestCrm({
                        url:'WxService?method=getRoomDesign',
                        method: 'post',
                        data: {
                            ID
                        }
                    }).then(res=>{
                        this.khbq[0].lcsj=res.data.STATUS
                    })
                }
            })
            requestCrm({
                url:'WxService?method=getCustInfoByCustid',
                method: 'post',
                data: {
                    custId: this.custId
                }
            }).then(res=>{
                this.khbq[0].yhlx=res.data[0].custBusinessType=='1'?'商业用户':'个人用户'
                this.khbq[0].cjfs=res.data[0].attribute9
                this.khbq[0].dhlx=res.data[0].cPhoneType
                this.khbq[0].ly=res.data[0].cSource
            })
            requestCrm({
                url:'WxService?method=getVCustInfoByCustId',
                method: 'post',
                data: {
                    custId: this.custId
                }
            }).then(res=>{
                this.khbq[0].nbsjs = res.data[0].PRODUCT_DESIGNER_NAME
                this.khbq[0].zjrxm = res.data[0].MIDDLEMAN_NAME
                this.khbq[0].sggz = res.data[0].MIDDLEMAN_GZ_NAME
                if(res.data[0].SERVICE_GUIDE_NAME){
                    this.khbq[0].dg = res.data[0].SERVICE_GUIDE_NAME
                    this.khbq[0].ywy = res.data[0].CREATE_NAME
                }else{
                    this.khbq[0].dg = res.data[0].CREATE_NAME
                    this.khbq[0].ywy = '无'
                    // res.data[0].CREATE_NAME
                }
                this.customer = res.data[0]
            })
            requestCrm({
                url:'WxService?method=getCusLabelByCusId',
                method: 'post',
                data: {
                    custId: this.custId
                }
            }).then(res=>{
                for(let i of res.data){
                    if(i.LABEL_TYPE=="LABEL_CUSTYPE"){
                        this.khbq[0].khdj=i.LABEL_NAME
                    }
                }
            })
        },
        getOther(){
            requestCommon({
                url:'https://wx.4006002222.com/biapex/bidwdb/dcp/cst_wxinfo?crm_id='+this.custId,
                method: 'get',
                data: {
                }
            }).then(res=>{
                if(res.status==200){
                    if(res.data&&res.data.items&&res.data.items.length){
                        this.wx = res.data.items
                    }
                }
            })

            requestCommon({
                url:'https://wx.4006002222.com/biapex/bidwdb/dcp/cst_recrfddetail?crm_id='+this.custId,
                method: 'get',
                data: {
                    
                }
            }).then(res=>{
                if(res.status==200){
                    if(res.data&&res.data.items&&res.data.items.length){
                        this.stk = res.data.items
                    }
                }
            })

            requestCommon({
                url:'https://wx.4006002222.com/biapex/bidwdb/dcp/cst_orderdetail?crm_id='+this.custId,
                method: 'get',
                data: {
                    
                }
            }).then(res=>{
                if(res.status==200){
                    if(res.data&&res.data.items&&res.data.items.length){
                        this.dd = res.data.items
                    }
                }
            })

            requestCommon({
                url:'https://wx.4006002222.com/biapex/bidwdb/dcp/cst_salesdetail?crm_id='+this.custId,
                method: 'get',
                data: {
                    
                }
            }).then(res=>{
                if(res.status==200){
                    if(res.data&&res.data.items&&res.data.items.length){
                        this.fh = res.data.items
                    }
                }
            })

            requestCommon({
                url:'https://wx.4006002222.com/biapex/bidwdb/dcp/cst_complaintdetail?crm_id='+this.custId,
                method: 'get',
                data: {
                    
                }
            }).then(res=>{
                if(res.status==200){
                    if(res.data&&res.data.items&&res.data.items.length){
                        this.tsd = res.data.items
                    }
                }
            })

            requestCommon({
                url:'https://wx.4006002222.com/biapex/bidwdb/dcp/cst_ztwarningdetail?crm_id='+this.custId,
                method: 'get',
                data: {
                    
                }
            }).then(res=>{
                if(res.status==200){
                    if(res.data&&res.data.items&&res.data.items.length){
                        this.ycd = res.data.items
                    }
                }
            })

            requestCommon({
                url:'https://wx.4006002222.com/biapex/bidwdb/dcp/cst_custcbdetail?crm_id='+this.custId,
                method: 'get',
                data: {
                    
                }
            }).then(res=>{
                if(res.status==200){
                    if(res.data&&res.data.items&&res.data.items.length){
                        this.ld = res.data.items
                    }
                }
            })
        }
    }
  };
  </script>
    <style>
        .custProfile .cust-info{
            padding: 20px 16px;
            background: #FFFFFF;
        }
        .custProfile .cust-name{
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            display: flex;
            align-items: baseline;
        }
        .custProfile .cust-phone{
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
            margin-left: 10px;
        }
        .custProfile .cust-address{
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
            margin-top: 10px;
        }
        .custProfile .tag-list{
            display: flex;
            align-items: center;
            /* justify-content: flex-end; */
            flex: 1;
        }
        .custProfile .tag-item{
            line-height: 20px;
            padding: 2px 8px;
            background: #4378BE;
            border-radius: 15px;
            font-size: 11px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            margin-left: 5px;
        }
        .custProfile .cust-creator{
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            margin-top: 10px;
            display: flex;
            align-items: baseline;
            /* justify-content: space-between; */
            /* margin-bottom: 10px; */
        }
        .cust-date{
            margin-left: 20px;
        }
    </style>
  